<error ng-show="vm.showError"
       error-type="vm.errorType"
       error-file="vm.file"
       error-folder="vm.file"
       on-error-confirm="vm.confirmError()"
       on-error-cancel="vm.cancelError()"></error>
<div class="dialogWrapper" ng-class="vm.wrapperClass">
  <div class="header">
    <div class="headerTop">
      <div class="headerTitle headerText">
        {{::vm.headerTitle}}
      </div>
      <div id="headerSearchId" class="headerSearch" ng-class="{'focused': vm.isInSearch === true || searchBoxHasFocus === true }">
        <div class="headerSearchLeft" ng-click="vm.focusSearchBox()" ng-class="{'blueState': vm.searchString !== '' || vm.isInSearch === true || searchBoxHasFocus === true }" ></div>
          <input id="searchBoxId" type="text" class="searchBox"
                 placeholder="{{::vm.searchPlaceholder}} {{vm.selectedFolder}}"
                 ng-blur="vm.storeRecentSearch();searchBoxHasFocus=false"
                 ng-focus="vm.displayRecentSearches();searchBoxHasFocus=true"
                 ng-change="vm.doSearch()"
                 ng-model="vm.searchString"/>
          <div class="searchBoxExtra" ng-show="vm.isInSearch"
               ng-style="{top: vm.getOffsetTop() + 37 + 'px', left: vm.getOffsetLeft() + 2 + 'px'}">
              <div class="searchBoxExtraItem"
                   ng-mousedown="vm.searchString = search;vm.doSearch()"
                   ng-repeat="search in vm.recentSearches"
                   ng-mouseover="vm.setTooltip(this.$index, search)"
                   id="search-item-index-{{this.$index}}">{{search}}</div>
          </div>
        <div ng-class="vm.searchString !== '' ? 'headerSearchRight' : 'headerSearchRightInvisible'" ng-click="vm.resetSearch()"></div>
      </div>
    </div>

    <div class="headerBottom">
      <div ng-show="vm.searchString" class="breadcrumbSection">
        Search results in "{{vm.folder.name}}"
      </div>
      <div ng-hide="vm.searchString" class="breadcrumbSection">
        <breadcrumb path="vm.folder.path"
                    include-root="vm.includeRoot"
                    on-select="vm.selectFolderByPath(selectedPath)"></breadcrumb>
      </div>
      <div class="addDelete">
        <div class="addFolder" ng-click="vm.addFolder()" title="{{::vm.addFolderText}}"></div>
        <div class="deleteFolder" ng-click="vm.remove()" title="{{::vm.removeText}}"></div>
      </div>
    </div>
  </div>

  <div class="middle">
    <div class="directoryTreeArea">
      <folder auto-expand="vm.autoExpand"
              folders="vm.folders"
              on-select="vm.selectFolder(selectedFolder);"
              show-recents="vm.showRecents"
              selected-folder="vm.folder"
              ng-class="{dark: vm.file !== null}"></folder>
    </div>

    <div class="fileArea" ng-class="{overflow: vm.showRecents}">
      <div class="fileAreaMessageView" ng-show="vm.showRecents && vm.recentFiles.length === 0">{{::vm.noRecentsMsg}}</div>
      <card ng-show="vm.showRecents && vm.recentFiles.length > 0"
            recent-files="vm.recentFiles"
            folder="vm.folder"
            on-click="vm.selectFile(file)"
            on-select="vm.highlightFile(selectedFile)"
            selected-file="vm.file"></card>
      <files search="vm.searchString"
             ng-show="!vm.showRecents"
             folder="vm.folder"
             on-click="vm.selectFile(file)"
             on-select="vm.highlightFile(selectedFile)"
             on-error="vm.renameError()"
             on-rename="vm.updateDirectories(oldPath, newPath, newName)"></files>
    </div>
  </div>

  <div class="bottom">
    <div class="fileNameEntry" ng-show="vm.wrapperClass === 'save'">
      <div class="fileNameEntryLabel">
        <label for="fileNameEntryTextBox">{{::vm.saveFileNameLabel}}</label>
      </div>
      <input id="fileNameEntryTextBox" type="text" class="fileNameEntryTextBox"
      ng-model="vm.fileToSave"/>
    </div>
    <div class="buttons">
      <button class="secondary" ng-click="vm.cancel()">{{::vm.cancelButton}}</button>
      <button class="primary" ng-show="vm.wrapperClass === 'open'" ng-click="vm.openClicked()" ng-disabled="!vm.file">{{::vm.openButton}}</button>
      <button class="primary" ng-show="vm.wrapperClass === 'save'" ng-click="vm.saveClicked()" ng-disabled="vm.fileToSave === '' || vm.folder.path == 'Recents'">{{::vm.saveButton}}</button>
    </div>
  </div>
</div>
